<template>
  <div class="grxx">
    <div class="left"></div>
    <div class="container">
      <el-card>
        <el-button
          type="primary"
          icon="el-icon-printer"
          size="small"
          @click="printData">
          保存为图片
        </el-button>
        <div ref="canvasImg" style="width:100%">

          <!--基本信息-->
          <el-divider content-position="center"><span style="font-weight: bold">基本信息</span></el-divider>
          <div class="editButton">
              <el-button type="primary" size="small" @click="handleEditJbxx">编辑</el-button>
            </div>
          <table class="info-table">
            <tbody>
            <tr>
              <td class="table-label">姓名</td>
              <td class="table-value">{{ userInfoData.name}}</td>
              <td class="table-label">性别</td>
              <td class="table-value">
                <dict-tag
                  :options="dict.type.sys_user_sex"
                  :value="userInfoData.sex"
                  :show-value="true"
                  style="justify-content: left"
              /></td>
              <td class="table-label" rowspan="3">照片</td>
              <td class="table-value" rowspan="3">
                <imagePreview :src="userInfoData.zp" width="100px" height="100px"></imagePreview>
              </td>
            </tr>
            <tr>
              <td class="table-label">年龄</td>
              <td class="table-value">{{ userInfoData.age}}</td>
              <td class="table-label">学号</td>
              <td class="table-value">{{ userInfoData.xh}}</td>
            </tr>
            <tr>
              <td class="table-label">年级</td>
              <td class="table-value">{{ userInfoData.grade}}</td>
              <td class="table-label">所属学院</td>
              <td class="table-value">{{ userInfoData.deptName }}</td>
            </tr>
            <tr>
              <td class="table-label">所属专业</td>
              <td class="table-value">{{ userInfoData.sszy }}</td>
              <td class="table-label">联系电话</td>
              <td class="table-value">{{ userInfoData.phone }}</td>
              <td class="table-label">邮箱</td>
              <td class="table-value">{{ userInfoData.email }}</td>
            </tr>
            <tr>
              <td class="table-label">关联用户</td>
              <td class="table-value">{{ userInfoData.nickName }}</td>
              <td class="table-label">备注</td>
              <td class="table-value" colspan="3">{{ userInfoData.remark }}</td>
            </tr>
            <tr>
              <td class="table-label">附件</td>
              <td class="table-value" colspan="5">
                <file-upload v-model="userInfoData.fj" disabled/>
              </td>
            </tr>
            </tbody>
          </table>

          <!--实习信息-->
          <el-divider content-position="center"><span style="font-weight: bold">实习信息</span></el-divider>
          <div class="editButton">
            <el-button type="primary" size="small" @click="handleEditSxxx">编辑</el-button>
          </div>
          <table class="info-table">
            <tbody>
            <tr>
              <td class="table-label">导师名称</td>
              <td class="table-value">{{ userInfoData.teacherName}}</td>
              <td class="table-label">导师联系方式</td>
              <td class="table-value">{{ userInfoData.teacherPhone}}</td>
              <td class="table-label">实习企业</td>
              <td class="table-value">{{ userInfoData.sxqy}}</td>
            </tr>
            <tr>
              <td class="table-label">实习岗位</td>
              <td class="table-value">{{ userInfoData.sxgw}}</td>
              <td class="table-label">企业联系人</td>
              <td class="table-value">{{ userInfoData.qyLxr}}</td>
              <td class="table-label">企业联系电话</td>
              <td class="table-value">{{ userInfoData.qyLxdh}}</td>
            </tr>
            <tr>
              <td class="table-label">实习开始时间</td>
              <td class="table-value">{{ parseTime(userInfoData.startTime, '{y}-{m}-{d}') }}</td>
              <td class="table-label">实习结束时间</td>
              <td class="table-value">{{ parseTime(userInfoData.endTime, '{y}-{m}-{d}') }}</td>
              <td class="table-label">实习时长</td>
              <td class="table-value">{{ userInfoData.sxsc }}</td>
            </tr>
            <tr>
              <td class="table-label">实习状态</td>
              <td class="table-value">
                <dict-tag :options="dict.type.xxgl_sxzt" :value="userInfoData.sxStatus"/>
              </td>
              <td class="table-label">实习地址</td>
              <td class="table-value" colspan="3">{{ userInfoData.sxdz }}</td>
            </tr>
            <tr>
              <td class="table-label">实习工作内容</td>
              <td class="table-value" colspan="5">{{ userInfoData.gznr }}</td>
            </tr>
            <tr>
              <td class="table-label">备注</td>
              <td class="table-value" colspan="5">{{ userInfoData.remark }}</td>
            </tr>
            <tr>
              <td class="table-label">附件</td>
              <td class="table-value" colspan="5">
                <file-upload v-model="userInfoData.sxfj" disabled/>
              </td>
            </tr>
            </tbody>
          </table>

        </div>
      </el-card>
    </div>
    <div class="right"></div>

    <!-- 基本信息编辑 抽屉-->
    <el-drawer
        size="40%"
        title="编辑基本信息"
        :wrapperClosable="false"
        :visible.sync="jbxxDrawer">
      <el-form ref="jbxxForm" :model="jbxxForm" :rules="jbxxRules" label-width="110px" inline>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="jbxxForm.name" placeholder="请输入姓名"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="jbxxForm.sex" placeholder="请选择性别"  style="width: 200px;">
            <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="jbxxForm.age" placeholder="请输入年龄"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="学号" prop="xh">
          <el-input v-model="jbxxForm.xh" placeholder="请输入学号"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="jbxxForm.grade" placeholder="请输入年级"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="所属学院" prop="deptId">
          <treeselect v-model="jbxxForm.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择所属学院"   style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="所属专业" prop="sszy">
          <el-input v-model="jbxxForm.sszy" placeholder="请输入所属专业"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="jbxxForm.phone" placeholder="请输入联系电话"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="jbxxForm.email" placeholder="请输入邮箱"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="关联用户" prop="glId">
          <el-select v-model="jbxxForm.glId" placeholder="请选择关联用户" filterable clearable style="width: 200px;">
            <el-option
                v-for="item in studentSelectData"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phoneNumber }}</span></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片" prop="zp">
          <image-upload v-model="jbxxForm.zp" :limit="1"/>
        </el-form-item>
        <el-form-item label="附件" prop="fj">
          <file-upload v-model="jbxxForm.fj"  :limit="10" style="width: 520px"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="jbxxForm.remark" type="textarea" placeholder="请输入内容"  style="width: 520px;"/>
        </el-form-item>
      </el-form>
      <div class="bottom-button">
        <el-button type="primary" @click="submitJbxxForm">确 定</el-button>
        <el-button @click="jbxxCancel">取 消</el-button>
      </div>
    </el-drawer>

    <!-- 实习信息编辑 抽屉-->
    <el-drawer
        size="40%"
        title="编辑实习信息"
        :wrapperClosable="false"
        :visible.sync="sxxxDrawer">
      <el-form ref="sxxxForm" :model="sxxxForm" :rules="sxxxRules" label-width="110px" inline>
        <el-form-item label="导师姓名" prop="teacherId">
          <el-select v-model="sxxxForm.teacherId" filterable clearable placeholder="请选择导师" style="width: 200px;">
            <el-option
              v-for="item in teacherSelectData"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phoneNumber }}</span></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导师联系方式" prop="teacherPhone">
          <el-input v-model="sxxxForm.teacherPhone" placeholder="请输入导师联系方式"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="实习企业" prop="sxqy">
          <el-input v-model="sxxxForm.sxqy" placeholder="请输入实习企业"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="实习岗位" prop="sxgw">
          <el-input v-model="sxxxForm.sxgw" placeholder="请输入实习岗位"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="企业联系人" prop="qyLxr">
          <el-input v-model="sxxxForm.qyLxr" placeholder="请输入企业联系人"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="企业联系电话" prop="qyLxdh">
          <el-input v-model="sxxxForm.qyLxdh" placeholder="请输入企业联系电话"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="实习开始时间" prop="startTime">
          <el-date-picker clearable
                          style="width: 200px"
                          v-model="sxxxForm.startTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择实习开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实习结束时间" prop="endTime">
          <el-date-picker clearable
                          style="width: 200px"
                          v-model="sxxxForm.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择实习结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实习时长" prop="sxsc">
          <el-input v-model="sxxxForm.sxsc" placeholder="请输入实习时长"  style="width: 200px;"/>
        </el-form-item>
        <el-form-item label="实习状态" prop="sxStatus">
          <el-select v-model="sxxxForm.sxStatus" placeholder="请选择实习状态"  style="width: 200px;">
            <el-option
              v-for="dict in dict.type.xxgl_sxzt"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实习地址" prop="sxdz">
          <el-input v-model="sxxxForm.sxdz" placeholder="请输入实习地址"  style="width: 520px;"/>
        </el-form-item>
        <el-form-item label="实习工作内容" prop="gznr">
          <el-input v-model="sxxxForm.gznr" type="textarea" placeholder="请输入实习工作内容"  style="width: 520px;"/>
        </el-form-item>
        <el-form-item label="附件" prop="sxfj">
          <file-upload v-model="sxxxForm.sxfj" :limit="10" style="width: 520px"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="sxxxForm.remark" type="textarea" placeholder="请输入内容"  style="width: 520px;"/>
        </el-form-item>
      </el-form>
      <div class="bottom-button">
        <el-button type="primary" @click="submitSxxxForm">确 定</el-button>
        <el-button @click="sxxxCancel">取 消</el-button>
      </div>
    </el-drawer>


  </div>
</template>
<script>
import html2canvas from 'html2canvas';
import {addXsxx, getUserInfoData, getXsxx, updateXsxx} from "@/api/xxgl/xsxx";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import {deptTreeSelectData, getUserSelect} from "@/api/system/user";
import {addSxxx, getSxxx, updateSxxx} from "@/api/xxgl/sxxx";
export default {
  components: {Treeselect},
  dicts: ['sys_user_sex','xxgl_sxzt','sxrz_rzlx','sxcg_shzt'],
  data() {
    return {
      // 用户数据
      userInfo:[],
      // 显示弹出框
      userInfoData: {},
      //存储当前登录用户ID
      currentUserId: this.$store.state.user.id,
      // 学生下拉框数据
      studentSelectData: [],
      // 老师下拉框数据
      teacherSelectData: [],
      // 所有部门树选项
      deptOptions: undefined,
      // 过滤掉已禁用部门树选项
      enabledDeptOptions: undefined,
      jbxxForm:{},
      sxxxForm:{},
      // 抽屉是否显示
      jbxxDrawer: false,
      sxxxDrawer: false,
      urlTop:window.location.origin+"/api",
      printObj:{
        id: 'printMe',
        popTitle: '这是打印的标题', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        standard: '',
        extarCss: ''
      },
      // 表单校验
      jbxxRules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" }
        ],
        xh: [
          { required: true, message: "学号不能为空", trigger: "blur" }
        ],
        grade: [
          { required: true, message: "年级不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属学院不能为空", trigger: "change" }
        ],
        sszy: [
          { required: true, message: "所属专业不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        zp: [
          { required: true, message: "照片不能为空", trigger: "blur" }
        ],
        glId: [
          { required: true, message: "绑定用户不能为空", trigger: "blur" }
        ],
      },
      // 表单校验
      sxxxRules: {
        teacherId: [
          { required: true, message: "导师姓名不能为空", trigger: "change" }
        ],
        teacherPhone: [
          { required: true, message: "导师联系方式不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        sxqy: [
          { required: true, message: "实习企业不能为空", trigger: "blur" }
        ],
        sxgw: [
          { required: true, message: "实习岗位不能为空", trigger: "blur" }
        ],
        qyLxr: [
          { required: true, message: "企业联系人不能为空", trigger: "blur" }
        ],
        qyLxdh: [
          { required: true, message: "企业联系电话不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        startTime: [
          { required: true, message: "实习开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "实习结束时间不能为空", trigger: "blur" }
        ],
        sxsc: [
          { required: true, message: "实习时长不能为空", trigger: "blur" }
        ],
        sxdz: [
          { required: true, message: "实习地址不能为空", trigger: "blur" }
        ],
        gznr: [
          { required: true, message: "实习工作内容不能为空", trigger: "blur" }
        ],
        sxStatus: [
          { required: true, message: "实习状态不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    if(this.currentUserId !==1){
      this.handleView(this.currentUserId);
      this.getDeptTree();
      this.getUserSelectData();
    }
  },
  methods: {
    handleView(currentUserId) {
      // 根据当前登录用户ID查询详情
      getUserInfoData(currentUserId).then(res => {
        this.userInfoData = res.data;
      });
    },
    /**
     * 打印个人信息
     */
    async printData(){
      try {
        const canvas = await html2canvas(this.$refs.canvasImg) // 在这里，将需要转换成图片的部分作为参数传入html2canvas
        const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
        const link = document.createElement('a'); // 创建一个a标签来下载图片
        link.download = this.userInfoData.name+'个人档案信息.png';
        link.href = image;
        link.click(); // 模拟点击下载图片
      } catch (e) {
        throw new Error(e)
      }
    },
    /**
     * 编辑个人信息
     */
    handleEditJbxx(){
      const studentId = this.userInfoData.studentId
      this.jbxxDrawer = true;
      if (studentId !== null){
        getXsxx(studentId).then(response => {
          this.jbxxForm = response.data
          this.jbxxDrawer = true;
        })
      }
    },
    /**
     * 编辑实习信息
     */
    handleEditSxxx(){
      const glId = this.userInfoData.glId
      if(glId === null){
        this.$modal.msgWarning("请先填写基本信息，并绑定关联用户!")
        return;
      }
      const sxxxId = this.userInfoData.sxxxId
      this.sxxxDrawer = true;
      if(sxxxId !== null){
        getSxxx(sxxxId).then(response => {
          this.sxxxForm = response.data
          this.sxxxDrawer = true;
        })
      }
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelectData().then(response => {
        this.deptOptions = response.data
        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
      })
    },
    // 过滤禁用的部门
    filterDisabledDept(deptList) {
      return deptList.filter(dept => {
        if (dept.disabled) {
          return false
        }
        if (dept.children && dept.children.length) {
          dept.children = this.filterDisabledDept(dept.children)
        }
        return true
      })
    },
    /** 查询用户下拉框数据 */
    getUserSelectData() {
      /* 2:学生   3:老师”*/
      /* 查询角色为学生下拉框内容*/
      getUserSelect(2).then(response => {
        this.studentSelectData = response.data
      })
      /* 查询角色为老师下拉框内容*/
      getUserSelect(3).then(response => {
        this.teacherSelectData = response.data
      })
    },
    /** 提交按钮 */
    submitJbxxForm() {
      this.$refs["jbxxForm"].validate(valid => {
        if (valid) {
          if (this.jbxxForm.studentId != null) {
            updateXsxx(this.jbxxForm).then(response => {
              this.$modal.msgSuccess("更新成功")
              this.handleView(this.currentUserId);
              this.jbxxDrawer = false
            })
          } else {
            addXsxx(this.jbxxForm).then(response => {
              this.$modal.msgSuccess("更新成功")
              this.handleView(this.currentUserId);
              this.jbxxDrawer = false
            })
          }
        }
      })
    },
    /** 提交按钮 */
    submitSxxxForm() {
      this.$refs["sxxxForm"].validate(valid => {
        if (valid) {
          if (this.userInfoData.sxxxId != null) {
            updateSxxx(this.sxxxForm).then(response => {
              this.$modal.msgSuccess("更新成功")
              this.handleView(this.currentUserId);
              this.sxxxDrawer = false
            })
          } else {
            this.sxxxForm.studentId = this.userInfoData.studentId
            addSxxx(this.sxxxForm).then(response => {
              this.$modal.msgSuccess("更新成功")
              this.handleView(this.currentUserId);
              this.sxxxDrawer = false
            })
          }
        }
      })
    },
    // 取消按钮
    jbxxCancel() {
      this.jbxxDrawer = false
      this.jbxxForm ={}
      this.resetForm("jbxxForm")
    },
    sxxxCancel() {
      this.sxxxDrawer = false
      this.sxxxForm ={}
      this.resetForm("sxxxForm")
    },
  },
};
</script>
<style>
.grxx{
  width: 100%;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: 0 60% 0;
  grid-gap: 20px;
}
.container{
  margin-top: 20px;
}

/* 表格样式 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
}

.info-table td {
  padding: 8px 11px;
  border: 1px solid #ebeef5;
  text-align: left;
  line-height: 25px;
}

.table-label {
  width: 120px;
  background-color: #F5F7FA;
  color: #606266;
  font-size: 14px;
  line-height: 25px;
  font-weight: 700;
}
.table-value{
  color: #606266;
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
}
.editButton{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -10px 0 12px 0;
}
.editButton button{
  box-sizing: inherit;
}
.bottom-button{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 20px 20px 20px 0;
}
</style>
